<template>
    <div class="mymain">
        <el-container class="cbox">
            <el-aside width="200px" class="mymenu">
                <Menu></Menu>
            </el-aside>
            <el-container>
                <el-header class="myhead">
                    <Head></Head>    
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
                <el-footer class="myfoot">
                    <Foot></Foot>  
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {onMounted,computed} from "vue"
import {ajax} from "@/api"
import {useStore} from "vuex"
import Foot from "@/components/Foot.vue"
import Head from "@/components/Head.vue"
import Menu from "@/components/Menu.vue"
export default {
    components:{
        Foot,
        Head,
        Menu
    },
    setup(){
        const store =useStore()
        const myInfo = computed(()=>{
            return store.state.userInfo
        })
        onMounted (async()=>{
            // let {code,result} = await ajax.getuserinfo()
        store.dispatch('changeUserInfoac')  //发送一个action
       
       })
        return{
            myInfo
        }
    },
    mounted(){
        // this.changeUserInfoac()
    }
}
</script>

<style lang="scss" scoped>
.mymain{
    width:100%;
    height:100%;
    .cbox{
        width:100%;
        height:100%;
        .mymenu{
            
            height:100%;
            overflow: auto;
            background: #eee;
        }
        .myfoot{
            background: rgb(219, 221, 223);
            border-top:1px solid #999;
        }
        .myhead{
            background: rgba(155, 108, 37,.521);
            border-bottom:1px solid #999;
        }
    }
}
</style>